import React, { useState, useCallback, useEffect } from 'react';
import { postSofActRuleFindFlow, getSofActRuleDeleteFlow } from '../api'
import AddProductionPlanSetModule from './components/AddProductionPlanSetModule'
import {
    ProductionPlanSetAll
} from './style'
import { message, PageHeader, Space, Table, Button, Modal } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;

const ProductionPlanSet = () => {
    const [listData, setListData] = useState([])
    const [addProductionPlanSetModuleShow, setAddProductionPlanSetModuleShow] = useState(false)
    const [clickId, setClickId] = useState(undefined)
    const listFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await postSofActRuleFindFlow()
                if (code === '20000') {
                    setListData(data)
                } else {
                    message.error(msg)
                }
            })()
        },
        [],
    )
    useEffect(() => {
        listFun()
    }, [listFun])
    const handleAddProductionPlanSet = () => {
        setAddProductionPlanSetModuleShow(true)
    }
    const handleChangeProductionPlonSet = (id) => {
        setAddProductionPlanSetModuleShow(true)
        setClickId(id)
    }
    //删除
    const handleDeleteProductionPlonSet  = (id) => {
        confirm({
            title: '确定要删除当前规则吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                ;(async () => {
                    const {code, msg} = await getSofActRuleDeleteFlow({id})
                    if(code ==='20000') {
                        message.success('删除成功！')
                        listFun()
                    }else{
                        message.error(msg)
                    }
                })()
            }
          });
    }
    const columns = [
        {
            title: '执行部门',
            dataIndex: 'departmentName'
        },
        {
            title: '流程名称',
            dataIndex: 'flowName',
        },
        {
            title: '父流程',
            dataIndex: 'parentName',
        },
        {
            title: '阻塞流程信息',
            render: (text, recode) => <Space>
                {
                    recode.mergeName && recode.mergeName.map(item => <span>{item.mergeName}</span>)
                }
            </Space>
        },
        {
            title: '执行顺序',
            dataIndex: 'order',
        },
        {
            title: '状态',
            dataIndex: 'state',
            render: text => <span>{text ? '关闭' : '开启'}</span>
        },
        {
            title: '操作',
            render: (text, rocode) => <Space>
                <Button type='primary' onClick={() => handleChangeProductionPlonSet(rocode.id)}>编辑</Button>
                <Button type='primary' danger  onClick={() => handleDeleteProductionPlonSet(rocode.id)}>删除</Button>
            </Space>
        },
    ];
    return <ProductionPlanSetAll>
        <PageHeader
            className="site-page-header"
            title="生产计划设置"
            extra={[
                <Button key="1" type="primary" onClick={() => handleAddProductionPlanSet()}>
                    添加总线
                </Button>
            ]}
        />
        <Table
            columns={columns}
            dataSource={listData}
            rowKey='id'
        />
        <AddProductionPlanSetModule
            addProductionPlanSetModuleShow={addProductionPlanSetModuleShow}
            setAddProductionPlanSetModuleShow={setAddProductionPlanSetModuleShow}
            clickId={clickId}
            listFun={listFun}
            setClickId={setClickId}
        />
    </ProductionPlanSetAll>
}

export default ProductionPlanSet